<?php
/**
 * 服务展示组件
 * 用于展示公司提供的各项服务
 */
$configKey = isset($configKey) ? $configKey : 'services';
// 从页面配置获取服务组件配置，使用默认值作为后备
$data = array_merge([
    'section_pretitle' => '我们的服务',
    'section_title' => '专业解决方案满足您的需求',
    'section_subtitle' => '我们提供全方位的数字化服务，助力您的业务增长和品牌提升',
    'layout' => 'grid',
    'columns' => '4',
    'column_gap' => '8',
    'card_style' => 'modern',
    'image_ratio' => '4/3',
    'show_all_link' => true,
    'all_link_text' => '查看全部服务',
    'all_link_url' => '#',
    'items' => []
], $pageConfig['components'][$configKey] ?? []);

// 处理布局和样式类
$columnClasses = [
    '1' => 'grid-cols-1',
    '2' => 'grid-cols-1 md:grid-cols-2',
    '3' => 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
    '4' => 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4'
];
$columnClass = $columnClasses[$data['columns']] ?? $columnClasses['4'];

$gapClass = 'gap-' . $data['column_gap'];

// 卡片样式处理
$cardBaseClasses = 'relative overflow-hidden rounded-xl transition-all duration-300';
$cardStyles = [
    'modern' => $cardBaseClasses . ' shadow-md hover:shadow-xl hover:-translate-y-1',
    'classic' => $cardBaseClasses . ' border border-gray-200 hover:border-primary',
    'minimal' => $cardBaseClasses . ' hover:shadow-md'
];
$cardClass = $cardStyles[$data['card_style']] ?? $cardStyles['modern'];
?>

<!-- 服务展示区域 -->
<section class="py-20" id="<?php echo $configKey;?>">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <!-- 区域标题 -->
        <div class="text-center max-w-3xl mx-auto mb-16">
            <?php if (!empty($data['section_pretitle'])): ?>
                <span class="inline-block text-sm font-semibold text-primary uppercase tracking-wider mb-2">
                    <?php echo $data['section_pretitle']; ?>
                </span>
            <?php endif; ?>
            
            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                <?php echo $data['section_title']; ?>
            </h2>
            
            <?php if (!empty($data['section_subtitle'])): ?>
                <p class="text-lg text-gray-600">
                    <?php echo $data['section_subtitle']; ?>
                </p>
            <?php endif; ?>
        </div>

        <!-- 服务网格 -->
        <div class="grid <?php echo $columnClass; ?> <?php echo $gapClass; ?>">
            <?php foreach ($data['items'] as $service): ?>
                <div class="<?php echo $cardClass; ?> group">
                    <!-- 服务图片 -->
                    <div class="aspect-<?php echo $data['image_ratio']; ?> overflow-hidden">
                        <img 
                            src="<?php echo htmlspecialchars($service['image']); ?>" 
                            alt="<?php echo htmlspecialchars($service['title']); ?>服务展示图"
                            class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                            loading="lazy"
                        >
                    </div>
                    
                    <!-- 服务内容 -->
                    <div class="p-6 bg-white">
                        <!-- 服务标签 -->
                        <?php if (!empty($service['tags']) && is_array($service['tags'])): ?>
                            <div class="flex flex-wrap gap-2 mb-4">
                                <?php foreach ($service['tags'] as $tag): ?>
                                    <span class="text-xs font-medium px-2.5 py-0.5 rounded-full bg-primary/10 text-primary">
                                        <?php echo htmlspecialchars($tag); ?>
                                    </span>
                                <?php endforeach; ?>
                            </div>
                        <?php endif; ?>
                        
                        <!-- 服务标题 -->
                        <h3 class="text-xl font-semibold mb-3 text-gray-900 group-hover:text-primary transition-colors duration-300">
                            <?php echo htmlspecialchars($service['title']); ?>
                        </h3>
                        
                        <!-- 服务描述 -->
                        <p class="text-gray-600 mb-5">
                            <?php echo htmlspecialchars($service['description']); ?>
                        </p>
                        
                        <!-- 服务额外信息（时长和价格范围） -->
                        <?php if ((!empty($service['duration']) || !empty($service['price_range']))): ?>
                            <div class="flex justify-between text-sm text-gray-500 mb-5 pt-3 border-t border-gray-100">
                                <?php if (!empty($service['duration'])): ?>
                                    <span class="flex items-center">
                                        <i class="fa fa-clock-o mr-1"></i>
                                        <?php echo htmlspecialchars($service['duration']); ?>
                                    </span>
                                <?php endif; ?>
                                
                                <?php if (!empty($service['price_range'])): ?>
                                    <span class="font-medium">
                                        <?php echo htmlspecialchars($service['price_range']); ?>
                                    </span>
                                <?php endif; ?>
                            </div>
                        <?php endif; ?>
                        
                        <!-- 查看详情链接 -->
                        <a href="<?php echo htmlspecialchars($service['link']); ?>" class="inline-flex items-center text-primary font-medium group-hover:underline">
                            了解详情
                            <i class="fa fa-arrow-right ml-2 text-sm transition-transform duration-300 group-hover:translate-x-1"></i>
                        </a>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
        
        <!-- 更多服务按钮 -->
        <?php if (!empty($data['show_all_link']) && $data['show_all_link']): ?>
            <div class="text-center mt-12">
                <a href="<?php echo htmlspecialchars($data['all_link_url']); ?>" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-primary/90 transition-colors duration-300 shadow-sm">
                    <?php echo htmlspecialchars($data['all_link_text']); ?>
                    <i class="fa fa-chevron-right ml-2 text-sm"></i>
                </a>
            </div>
        <?php endif; ?>
    </div>
</section>
    